<template>
    <div class="statistic">
        <header>
            <div class="head-cont clear">
                <div class="logo-lk fl">
                    <a :href="BASE_URL" class="logo-c">
                        <img v-if="logo_url" :src="BASE_URL + logo_url" alt="logo">
                    </a>
                     <a v-if="logo_txt" :href="BASE_URL" class="logo-txt">{{logo_txt}}</a>
                    <i>·</i>
                    <span class="link-home">大数据</span>
                </div>
            </div>
        </header> 
        <main>
            <div class="map">
                <p class="head-title">数据概览</p>
                <div>
                    <div id="map-data" style="max-width: 998px;height:680px;" ref="mapdom"></div>
                </div>
                <div class="position-name">
                    <p>地区：{{position_name}}</p>
                    <p>更新时间：{{new Date().toLocaleDateString()}}</p>
                </div>
            </div>
            <div class="statistical">
                <div>
                    <p class="head-title">用户统计</p>
                    <div class="inner-box">
                        <div class="inner-l">
                            <div class="fs4"></div>
                        </div>
                        <div class="inner-r">
                            <ul>
                                <li>
                                    <p>总用户</p>
                                    <span>{{userData.total_num}}</span>
                                </li>
                                <li>
                                    <p>学生</p>
                                    <span>{{userData.student_num}}</span>
                                </li>
                                <li>
                                    <p>教师</p>
                                    <span>{{userData.teacher_num}}</span>
                                </li>
                            </ul>
                            <div class="gender-ratio">
                                <div class="item">
                                    <i class="fs7"></i>
                                    <span>{{userData.male_percent + '%'}}</span>
                                </div>
                                <div class="item">
                                    <i class="fs8"></i>
                                    <span>{{userData.female_percent + '%'}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <p class="head-title">接入统计</p>
                    <div class="inner-box">
                        <div class="inner-l">
                            <div class="fs9"></div>
                        </div>
                        <div class="inner-r">
                            <ul>
                                <li>
                                    <p>总数</p>
                                    <span>{{platformData.total_num}}</span>
                                </li>
                                <li>
                                    <p>院校</p>
                                    <span>{{platformData.school_num}}</span>
                                </li>
                                <li>
                                    <p>教育局</p>
                                    <span>{{platformData.department_num}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <el-button type="primary" class="count-details" @click="toLink('/statistic/user')">查看统计详情</el-button>
                </div>
            </div>
        </main>
    </div>
</template>
<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
import jsonData from './../../../assets/json/foshan.json'; // 载入json文件

export default {
    name: 'map-data',
    data(){
        return {
            baseUrl: process.env.BASE_URL,
            position_name: null,
            overView: [],
            userData: [],
            platformData: [],
            nameMap: {}, /*自定义名称映射*/
            logo_url: sessionStorage.getItem('logoUrl'),
            logo_txt: sessionStorage.getItem('siteTitle')
        }
    },
    created() {
        this.getOverview();
        this.getUserdata();
        this.getPlatformdata();
    },
    methods: {  
        toLink(link) {
            this.$router.push(link);
        },
        // 数据概览
        getOverview() {
            let success = ( res => {
                let data = res.data.position_data;
                this.position_name = res.data.position_name;

                data.forEach( item => {
                    this.overView.push({
                        name: item.name,
                        value: item.platform_num
                    })
                    this.nameMap[item.name] = item.name;
                })

                this.mapInit();
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })
            this.$ajax.get('api/bigdata/index_overview', {params: {}, func: {success: success, fail: fail}})
        },
        mapInit() {
            let myChart = echarts.init(document.getElementById('map-data'));

            echarts.registerMap('FS', jsonData);
            myChart.setOption({
                tooltip: {/*提示框组件*/
                    trigger: 'item',
                    formatter: '{b}<br/><span style="font-weight: normal">数量：{c}</span>',/*提示框文本*/
                    backgroundColor: '#fff',
                    padding: 10,
                    textStyle: {
                        color: '#000',
                        fontWeight: 'bold'
                    }
                },
                series: [
                    {
                        name: '地图',
                        type: 'map',
                        mapType: 'FS', /*自定义扩展图表类型*/
                        roam: false,/*开启缩放*/
                        itemStyle:{/*默认样式*/
                            areaColor: '#324368',
                            borderColor: '#d0d4dd',
                            shadowColor: '#0c204e',
                            shadowBlur: 5
                        },
                        emphasis: {/*鼠标悬浮*/
                            label: {
                                show: false/*是否显示标签*/
                            },
                            itemStyle: {/*高亮样式*/
                                areaColor: '#3f5486',
                                borderColor: '#33b3cc',
                                color: '#fff'
                            }
                        },
                        data: this.overView,
                        nameMap: this.nameMap
                    }
                ]
            });
        },
        // 用户统计
        getUserdata() {
            let success = ( res => {
                this.userData = res.data;
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })
            this.$ajax.get('api/bigdata/index_userdata', {params: {}, func: {success: success, fail: fail}})
        },
        // 接入统计
        getPlatformdata() {
            let success = ( res => {
                this.platformData = res.data;
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })
            this.$ajax.get('api/bigdata/index_platformdata', {params: {}, func: {success: success, fail: fail}})
        }
    },
}
</script>
<style lang="scss">
    .statistic { 
        main {
            display: flex;
            padding: 40px 20px;
            background-color: #242D41;

            ul {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
            }

            li {
                position: relative;
                margin: 10px;
                padding: 10px;
                border: 1px solid #797979;
                font-size: 30px;
                background: #fff;
                width: 135px;
                height: 130px;
                border-radius: 5px;
                color: #000;

                p {
                    padding-left: 10px;
                    padding-top: 10px;
                    text-align: left;
                    font-size: 16px;
                }

                span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 30px;
                    color: #EB9703;
                }
            }
            
            .map,
            .statistical {
                padding: 25px;
                text-align: center;
                border: 1px solid #324268;
                color: #fff;
                background-color: #283656;
            }

            .map {
                flex: 1;
                margin-right: 10px;

                >div:first-child {
                    width: 100%;
                    height: 100%;
                }

                .position-name {
                    text-align: right;
                    font-size: 14px;
                    color: #76829D;

                    p {
                        margin: 10px;
                    }
                }
            }

            .statistical {
                flex: 0 0 820px;
                margin-left: 10px;

                >div:first-child {
                    margin-bottom: 30px;
                }

                >div:nth-child(2) {
                    margin-bottom: 100px;
                }

                >div:last-child {
                    margin-bottom: 15px;
                    font-size: 16px;
                }

                .count-details {
                    width: 100%;
                    min-width: 300px;
                }

                .head-title + div {
                    padding: 10px 0;
                }

                .inner-box {
                    display: flex;
                    margin: 0 40px;

                    .inner-l {
                        flex: 0 0 170px;
                        margin-right: 34px;
                        padding-top: 20px;
                        text-align: center;
                    }
                    .inner-r {
                        flex: 1;

                        .gender-ratio {
                            margin-bottom: 40px;
                            padding: 15px;

                            >div:first-child {
                                margin-right: 2%;
                            }

                            >div:last-child {
                                margin-left: 2%;
                            }

                            .item {
                                display: inline-block;
                                width: 48%;
                                height: 80px;
                                line-height: 80px;
                                background: #324369;
                                
                                span {
                                    font-size: 30px;
                                    color: #7E96CC;
                                }
                            }
                        }
                    }
                }
            }
        }      
        header{
            background: #fff;
            height: 80px;
            box-shadow: 0 2px 4px 0 rgba(195,195,195,0.30);

            .head-cont{
                padding: 15px 25px 0 25px;
            }

            .logo-c{
                >img{
                    max-width: 100px;
                    max-height: 40px;
                }

                >span{
                    font-size: 22px;
                    margin: 0 5px 0 10px;
                    font-weight: bold;
                }
            }

            .logo-lk{
                display: flex;
                align-items: center;
                >a{
                    line-height: 40px;
                }

                >i{
                    margin-right: 5px;
                    font-weight: bold;
                }

                .link-home{
                    font-size: 16px;
                    color: #000000;
                    letter-spacing: 2px;

                }
            }

            .train-test{
                button{
                    background: #348EFC;
                    border-radius: 3px;
                    width: 120px;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    color: #fff;
                    padding: 0;
                }

                >a,
                >span{
                    display: inline-block;
                    vertical-align: top;
                    line-height: 36px;
                    color: #338efc;
                    margin-right: 30px;
                    cursor: pointer;
                }
            }
        }
    }
</style>

